<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-left (click)="navBack()">
        <ion-icon class="nav-back" name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>{{"alarmTitle" | translate}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <div>{{"heart" | translate}}:</div>
      </ion-col>
      <ion-col>
        <input style="width: 100%;" [(ngModel)]="this.person.heartLow" placeholder="{{'heartLow' | translate}}" />
      </ion-col>
      <ion-col>
        <input style="width: 100%;" [(ngModel)]="this.person.heartUp" placeholder="{{'heartUp' | translate}}" />
      </ion-col>
      <ion-col>
        <div>{{"heartUnit" | translate}}</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>{{"breathe" | translate}}:</div>
      </ion-col>
      <ion-col>
        <input style="width: 100%;" [(ngModel)]="this.person.breatheLow" placeholder="{{'breatheLow' | translate}}" />
      </ion-col>
      <ion-col>
        <input style="width: 100%;" [(ngModel)]="this.person.breatheUp" placeholder="{{'breatheUp' | translate}}" />
      </ion-col>
      <ion-col>
        <div>{{"heartUnit" | translate}}</div>
      </ion-col>
    </ion-row>
    <ion-row>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>{{"TURN_OVER" | translate}}:</div>
      </ion-col>
      <ion-col>
        <ion-select no-padding no-margin [(ngModel)]="this.person.turnOverReminder" placeholder="{{ 'turnOverReminder' | translate}}"
          style="height:30px;" interface="popover">
          <ion-option value="0">{{'noReminder' | translate}}</ion-option>
          <ion-option value="90">1.5 {{'hours' | translate}}</ion-option>
          <ion-option value="120">2 {{'hours' | translate}}</ion-option>
          <ion-option value="180" selected>3 {{'hours' | translate}}</ion-option>
          <ion-option value="240">4 {{'hours' | translate}}</ion-option>
        </ion-select>
      </ion-col>
      <ion-col>
        <div>{{"moveAlarm" | translate}}:</div>
      </ion-col>
      <ion-col>
        <input style="width: 100%;" [(ngModel)]="this.person.move" placeholder="{{ 'moveThreshold' | translate}}" />
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-label>{{"UpAwayAlarm" | translate}}</ion-label>
        <ion-checkbox [(ngModel)]="this.bedAlarm"></ion-checkbox>
      </ion-col>
      <ion-col>
        <ion-label>{{"UP" | translate}}</ion-label>
        <ion-checkbox [(ngModel)]="this.person.upAlarm" disabled={{!this.bedAlarm}} checked="{{this.bedAlarm}}&&{{this.bedAlarm}}"></ion-checkbox>
      </ion-col>
      <ion-col>
        <ion-label>{{"SIDE" | translate}}</ion-label>
        <ion-checkbox [(ngModel)]="this.person.sideAlarm" disabled={{!this.bedAlarm}} checked="{{this.bedAlarm}}&&{{this.bedAlarm}}"></ion-checkbox>
      </ion-col>
      <ion-col>
        <ion-label>{{"AWAY" | translate}}</ion-label>
        <ion-checkbox [(ngModel)]="this.person.awayAlarm" disabled={{!this.bedAlarm}} checked="{{this.bedAlarm}}&&{{this.bedAlarm}}"></ion-checkbox>
      </ion-col>
    </ion-row>
  </ion-grid>
  <button *ngIf="!rest.validated" [disabled]=this.rest.viewOnly ion-button full color="light" (click)="nav2validate()">
    <ion-label color="hushitong">{{"modify" | translate}}</ion-label>
  </button>
  <button *ngIf="rest.validated" ion-button full color="light" (click)="doConfirm()">
    <ion-label color="hushitong">{{"modify" | translate}}</ion-label>
  </button>
</ion-content>
